<template>
    <div style="height: 100%; " id="LookGenealogy"
         v-loading="loadingTree"
         element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading">
        <el-container style="height: 100%">
            <el-aside width="15%" class="lookleft">
                <!--                <div style="height: 100%;-->
                <!--                            border-right: 1px dashed darkgrey;-->
                <!--                            padding-right: 5px;"-->
                <!--                >-->
                <el-input
                        class="textSearch"
                        style="width: 220px"
                        placeholder="搜索"
                        prefix-icon="el-icon-search"
                        v-model="filterText">
                </el-input>

                <el-tree
                        class="filter-tree"
                        :data="personInfo"
                        :props="defaultProps"
                        :accordion="true"
                        :indent="10"
                        highlight-current
                        :filter-node-method="filterNode"
                        ref="tree"
                        @node-click="checkId"
                >
                </el-tree>
                <!--                </div>-->
                <!--                这是传回来的id:{{this.$route.query.id}}-->
            </el-aside>
            <el-container>
                <el-main class="infor">
                    <div style="flex: 45.5%;">
                        <el-divider content-position="left">
                            <h2 style="height: 20px;line-height: 20px">【视频简介】</h2>
                        </el-divider>
<!--                        <vueMiniPlayer ref="vueMiniPlayer" :video="video" :mutex="true" :url="person.addressVideo" @fullscreen="handleFullscreen"/>-->
                        <video
                                id="myVideo"
                                class="video-js"
                        >
<!--                            <source-->
<!--                                    :src="person.addressVideo"-->
<!--                                    type="video/mp4"-->
<!--                            >-->
                            <source id='videoid' :src="videosrc" type="application/x-mpegURL">
                        </video>
                        <el-input placeholder="请输入内容" v-model="person.addressVideo" style="margin-top: 10px" :readonly="model === 'check'">
                            <template slot="prepend">视频地址</template>
                        </el-input>
                    </div>
                    <div style="flex: 50%; padding-left: 10px; height: 85%; ">
                        <el-divider content-position="left">
                            <h2 style="height: 20px;line-height: 20px">【个人信息】</h2>
                        </el-divider>

                        <el-form class="inforModel">
                            <!--个人照片-->
                            <div class="IDimg">
                                    <template v-if="model === 'check'">
                                    <el-image
                                            style="width: 100%; height: 100%;z-index: 999;border-radius: 8px;"
                                            :src="local+person.img"
                                            :preview-src-list="[local+person.img]">
                                    </el-image>
                                    </template>
                                <!--个人照片-->
                            </div>

                            <!--个人信息模板-->
                            <el-row :gutter="15">
                                <!--姓名-->
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="姓名：">
                                            <el-input
                                                    id="aa"
                                                    class="information-pop"
                                                    style="width: 116px"
                                                    v-model="person.name"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--字辈-->
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="字辈：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 85px;"
                                                    v-model="person.generation"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--排行-->
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="排行：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 85px;"
                                                    v-model="person.ranking"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--性别-->
                                <el-col :span="4">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="性別：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 55px;"
                                                    v-model="person.sex"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--曾用名-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="曾用名：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 131px;"
                                                    v-model="person.beforname"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--小名-->
                                <el-col :span="6">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="小名：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 116px;"
                                                    v-model="person.minname"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--年龄-->
                                <el-col :span="5" :offset="1">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="年龄：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 85px;"
                                                    v-model="personAge"
                                                    :readonly=true
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--学历-->
                                <el-col :span="5">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="学历：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 85px;"
                                                    v-model="person.education"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--兵役情况-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="兵役情况：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 115px;"
                                                    v-model="person.military"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--职位-->
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="职位：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 178px;"
                                                    v-model="person.position"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--职业-->
                                <el-col :span="11">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="职业：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 270px;"
                                                    v-model="person.occupation"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--单位-->
                                <el-col :span="13">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="单位：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 331px;"
                                                    v-model="person.company"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--出生日期-->
                                <el-col :span="10">
                                    <el-tooltip class="item" effect="dark" content="点击查看阴历" placement="top">
                                        <div class="grid-content bg-purple">
                                            <el-form-item label="出生日期：">
                                                <template v-if="model === 'check'">
                                                    <el-input
                                                            suffix-icon="el-icon-date"
                                                            class="information-pop"
                                                            style="width: 207px; cursor: pointer"
                                                            v-model="person.birthDate"
                                                            :readonly="model === 'check'"
                                                    >

                                                    </el-input>
                                                </template>
                                                <template v-else>
                                                    <el-date-picker
                                                            style="width: 207px;"
                                                            v-model="person.birthDate"
                                                            type="date"
                                                            format="yyyy 年 MM 月 dd 日"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择日期">
                                                    </el-date-picker>
                                                </template>
                                            </el-form-item>
                                        </div>
                                    </el-tooltip>
                                </el-col>

                                <!--出生时间-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="出生时间：">
                                            <template v-if="model === 'check'">
                                                <el-input
                                                        suffix-icon="el-icon-time"
                                                        class="information-pop"
                                                        style="width: 115px;"
                                                        v-model="person.birthTime"
                                                        :readonly="model === 'check'"
                                                >

                                                </el-input>
                                            </template>
                                            <template v-else>
                                                <el-time-picker
                                                        style="width: 115px;"
                                                        v-model="person.birthTime"
                                                        placeholder="选择时间"
                                                        value-format="HH:mm" format="HH:mm">
                                                </el-time-picker>
                                            </template>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--出生地-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="出生地：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 131px;"
                                                    v-model="person.birthPlace"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--在世状态-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <template v-if="model === 'check'">
                                            <el-form-item label="在世状态：">
                                                <el-input
                                                        class="information-pop"
                                                        style="width: 115px;"
                                                        v-model="person.livingState"
                                                        :readonly="model === 'check'"
                                                >

                                                </el-input>
                                            </el-form-item>
                                        </template>
                                        <template v-else>
                                            <el-form-item label="在世状态：">
                                                <el-select v-model="person.livingState" placeholder="请选择"
                                                           style="width: 115px; font-size: 20px">
                                                    <el-option
                                                            v-for="item in living"
                                                            :key="item.livingVal"
                                                            :label="item.label "
                                                            :value="item.livingVal">
                                                    </el-option>
                                                </el-select>
                                            </el-form-item>
                                        </template>

                                    </div>
                                </el-col>
                                <!--逝世日期-->
                                <el-col :span="10">
                                    <el-tooltip class="item" effect="dark" content="点击查看阴历" placement="top">
                                        <div class="grid-content bg-purple">
                                            <el-form-item label="逝世日期：">
                                                <template v-if="model === 'check'">
                                                    <el-input
                                                            suffix-icon="el-icon-date"
                                                            class="information-pop"
                                                            style="width: 207px;"
                                                            v-model="person.deathDate"
                                                            :readonly="model === 'check'"
                                                    >
                                                    </el-input>

                                                </template>
                                                <template v-else>
                                                    <el-date-picker
                                                            style="width: 207px;"
                                                            v-model="person.deathDate"
                                                            type="date"
                                                            format="yyyy 年 MM 月 dd 日"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择日期">
                                                    </el-date-picker>
                                                </template>
                                            </el-form-item>
                                        </div>
                                    </el-tooltip>
                                </el-col>
                                <!--逝世时间-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="逝世时间：">
                                            <template v-if="model === 'check'">
                                                <el-input
                                                        suffix-icon="el-icon-time"
                                                        class="information-pop"
                                                        style="width: 115px;"
                                                        v-model="person.deathTime"
                                                        :readonly="model === 'check'"
                                                >
                                                </el-input>
                                            </template>
                                            <template v-else>
                                                <el-time-picker
                                                        style="width: 115px;"
                                                        v-model="person.deathTime"
                                                        placeholder="选择时间"
                                                        value-format="HH:mm" format="HH:mm">
                                                </el-time-picker>
                                            </template>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--逝因-->
                                <el-col :span="7">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="逝因：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 147px;"
                                                    v-model="person.deathCause"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--逝世地-->
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="逝世地：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 161px;"
                                                    v-model="person.deathPlace"
                                                    :readonly="model === 'check'"
                                            >

                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--卒葬地-->
                                <el-col :span="9">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="卒葬地：">
                                            <el-input
                                                    class="information-pop"
                                                    style="width: 193px;"
                                                    v-model="person.funeralPlace"
                                                    :readonly="model === 'check'"
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <!--以下是个人简介-->
                                <el-col>
                                    <el-divider content-position="left">
<!--                                        <el-tooltip class="item" effect="dark" content="点击查看配偶信息" placement="top">-->
                                            <h3 class="spouse_h3" style="
                                                margin: 0!important">【个人简介】</h3>
<!--                                        </el-tooltip>-->
                                    </el-divider>
                                </el-col>
                            </el-row>

                            <el-input
                                    type="textarea"
                                    placeholder="请输入内容"
                                    v-model="person.profile"
                                    maxlength="350"
                                    resize="none"
                                    :readonly="model === 'check'"
                                    show-word-limit
                                    :rows="10"
                                    style="min-height: 225px;
                                        margin-top: 0px;
                                        margin-bottom: 0px;"
                            >
                            </el-input>
                            <div style="float: right; margin-top: 5px">
                                <el-button @click="inforSpouseData" type="warning" v-if="butSpou">查看配偶信息</el-button>

                                <el-button @click="changeModel" type="primary" icon="el-icon-edit"
                                           v-if="model === 'check' && butEdit">编辑
                                </el-button>
                                <el-button v-if="model === 'edit'" type="success" icon="el-icon-check"
                                           @click="updatePersonalData">保存
                                </el-button>
                                <el-button v-if="model === 'edit'" @click="exti">取消</el-button>
                            </div>
                            <template v-if="model === 'edit'">
<!--                                action="http://localhost:8090/hrsystem_spring/api/file/upload"-->
                                <el-upload
                                        action="http://ningxc.cn:9988/hrsystem-spring/api/file/upload"
                                        list-type="picture-card"
                                        :auto-upload="true"
                                        :on-success="onSuccess"
                                >

                                    <div style="display: inline-block;padding-left: 7px ">上传/替换照片</div>
                                </el-upload>
                            </template>
                        </el-form>

                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    /* eslint-disable */
    import videojs from "video.js";

    export default {
        name: "LookGenealogy",
        data() {
            return {
                personDeathAge:'',
                personAge: '',
                butEdit: false,
                butSpou: false,
                // local:'http://localhost:8090/hrsystem_spring',
                local:'http://ningxc.cn:9988/hrsystem-spring',
                videosrc:'',
                // input1:'',
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                loadingTree: true,
                token: localStorage.getItem('TOKEN'),
                userInfo: {},
                person: {},
                personInfo: {},
                // 在世状态
                livingVal: '',
                living: [
                    {livingVal: "在世", label: '在世'},
                    {livingVal: "已故", label: '已故'},
                    {livingVal: "未知", label: '未知'},
                ],
                model: 'check',
                filterText: '',
                name: '',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                img: {
                    PicName: '',
                    className: '',
                    picDescribe: '',
                    picName: '',
                    picUrl: '',
                    userId: ''
                },
                // video: {
                //     url: "",
                //     cover: 'url(" + require("../../src/image/Background-6.png") + ")',
                //     muted: false,
                //     loop: false,
                //     preload: 'auto',
                //     poster: '',
                //     volume: 1,
                //     autoplay: false,
                // }
            }
        },
        mounted(){
            this.initVideo();
            // this.selectomit();


        },
        created() {
            this.$axios.get('/api/user/token', {headers: {TOKEN: this.token}}).then(res => {
                this.userInfo = res.data.data;
                //展示族系树状列表
                this.$axios.get('/api/personaldata/checkchildreninfo?adminId=' + this.userInfo.id).then(res => {
                    console.log(res)
                    if (res.data.status === 1) {
                        this.personInfo = res.data.data;
                        this.loadingTree = false;
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            });
            if (this.$route.query.id == null) {
                return null;
            } else {
                this.inforPersonalData(this.$route.query.id);
                this.loadingTree = false;
            }
        },
        /**
         * 过滤器
         */
        filters: {},

        /**
         * 侦听器
         */
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        methods: {

            //根据实际情况计算年龄
            getDeathAge(){
                if(this.person.livingState === "已故" || this.person.deathDate != null){
                    this.person.livingState = "已故";
                    var moment = require('moment');
                    let  day = moment(this.person.deathDate).diff(moment(this.person.birthDate), 'years')
                    this.personDeathAge = day;
                    this.personAge = this.personDeathAge;
                    console.log("计算死亡年龄"+ day)
                }else {
                    this.getAge(this.person.birthDate);
                }
            },

            //根据出生日期计算年龄
            getAge(birthDate) {
                if (birthDate == null) {
                    return '';
                }
                let birthdays = new Date(birthDate.replace(/-/g, "/"));
                let d = new Date();
                let age =
                    d.getFullYear() -
                    birthdays.getFullYear() -
                    (d.getMonth() < birthdays.getMonth() ||
                    (d.getMonth() == birthdays.getMonth() &&
                        d.getDate() < birthdays.getDate())
                        ? 1
                        : 0);
                this.personAge = age;
                console.log("年龄："+this.personAge)
                return age;
            },

            //播放器
            selectomit () {
                var that = this;
                that.videosrc = this.person.addressVideo;
                console.log(that.videosrc);
                var player = videojs('myVideo');
                console.log(player);
                player.src({
                    src: that.videosrc
                })
            },
            //初始化视频播放器
            initVideo() {
                //初始化视频方法
                let myPlayer = this.$video(myVideo, {
                    //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                    controls: true,
                    //自动播放属性,muted:静音播放
                    autoplay: "muted",
                    //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                    preload: "auto",
                    currentTime: 0
                    //设置视频播放器的显示宽度（以像素为单位）
                    // width: "800px",
                    //设置视频播放器的显示高度（以像素为单位）
                    // height: "400px"

                //
                });
            },

            onSuccess(res) {
                console.log(res);
                this.img.picUrl = this.$axios.defaults.baseURL + res.data.url;
                this.person.img = res.data.url;
            },

            //展示配偶信息模板
            inforSpouseData() {
                this.$axios.get('/api/personaldata/spouse?id=' + this.person.id)
                    .then((res) => {
                        console.log(res);
                        if (res.data.status === 1) {
                            this.person = res.data.data;
                            this.getAge(this.person.birthDate);
                            this.selectomit();
                            this.getDeathAge();
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            },
            //展示个人信息模板
            inforPersonalData(e) {
                // console.log(e)
                let param = {
                    id: e,
                    //根据管理员id查询数据
                    // adminId: this.userInfo.id
                }
                this.$axios.get('/api/personaldata/check', {params: param})
                    .then((res) => {
                        // console.log(res);
                        if (res.data.status === 1) {
                            this.person = res.data.data;
                            this.selectomit();
                            this.getDeathAge();
                            this.loadingTree = false;
                            this.$message.success(res.data.msg);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            },
            //修改个人信息模板
            updatePersonalData() {
                if(this.person.deathDate != null){
                    this.person.livingState = "已故"
                    this.person.age = this.personDeathAge;
                }
                if(this.person.birthDate != null && this.person.deathDate == null){
                    this.getAge(this.person.birthDate);
                    this.person.age = this.personAge;
                }
                // 用PATCH方式调用后端接口
                this.$axios.patch(`/api/personaldata/update/${this.person.id}`, this.person).then((res) => {
                    if (res.data.status === 1) {
                        // 如果创建成功
                        this.person = res.data.data;
                        this.$message.success(res.data.msg);
                        this.selectomit();
                        this.getDeathAge();
                        this.model = 'check';
                        this.butSpou = true;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            filterNode(value, personInfo) {
                if (!value) return true;
                return personInfo.name.indexOf(value) !== -1;
            },
            handleFullscreen() {

            },
            /**
             *  获取列表id
             */
            checkId(e) {
                this.loadingTree = true;
                this.id = e.id
                this.butEdit = true;
                this.butSpou = true;
                // alert(this.id)
                if (this.model === 'edit'){
                    this.model = 'check';
                }
                this.inforPersonalData(this.id);
                // this.checkChildrenInfo(this.id);
            },

            exti(){
                this.model = 'check';
                this.butSpou = true;
            },

            /**
             * 改变模式
             * check为查看（初始化状态）
             * edit为编辑（启用编辑状态时）
             */
            changeModel() {
                if (this.model === 'edit') {
                    this.model = 'check';
                } else {
                    this.model = 'edit';
                    this.butSpou = false;
                }
            },
        },
    }
</script>

<style lang="scss">
    #LookGenealogy {
        max-width: 1920px;
        min-width: 1600px;

        .information-pop {
            font-size: 18px;
            padding: 0;
            height: 30px;
            line-height: 30px;
        }

        .el-upload-list--picture-card .el-upload-list__item{
            width: 110px!important;
            height: 110px!important;
        }
        .el-upload-list{
            position: absolute;
            top: -8px;
            right: -6px;
        }


        .is-ready {
            width: 110px;
            height: 110px;
            /*position: absolute;*/
            /*top: 110px;*/
            /*right: 5px;*/
            margin-top: 0;
            margin-right: 0;
        }

        /*上传图片*/
        .el-upload--picture-card {
            /*color: chocolate;*/
            border: none;
            /*border-radius: 0!important;*/
            width: 110px;
            height: 15px;
            line-height: 15px;
            position: absolute;
            top: 110px;
            right: 5px;
        }

        .IDimg {
            border-radius: 10px;
            text-align: right;
            width: 110px;
            height: 130px;
            /*border: 3px solid #cdcdcd;*/
            /*box-shadow: 0px 0px 1px 3px grey;*/
            float: right;
            cursor: pointer;
            /*、p*/
        }

        .inforModel {
            /*border: 1px solid red;*/
            padding-left: 10px;
            position: relative;
            height: 85%;
            width: 100%!important;
            /*height: 85%!important;*/
        }

        /*分栏样式*/
        .el-form-item {
            margin-bottom: 5px;
        }

        .el-row {
            /*margin-bottom: 20px;*/

            &:last-child {
                margin-bottom: 0;
            }
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #bcc9db;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
        }


        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-form-item__label {
            font-weight: bold;
            font-size: 16px !important;
            padding: 0 0 0 5px;
        }

        /*.vm-player ._poster[data-v-5bbaf828] {*/
        /*    background-size: contain;*/
        /*    z-index: 999;*/
        /*}*/

        /*视频播放器*/
        /*.vm-player[data-v-5bbaf828] {*/
        /*    width: 100%;*/
        /*    height: 85%;*/
        /*    z-index: 999;*/
        /*}*/
        .video-js{
            width: 100%;
            height: 85%;
            z-index: 999;
        }

        .lookleft {
            background-color: white;
            color: #333;
            text-align: center;
            line-height: normal;
            /*border-right: 1px dashed darkgrey;*/
            padding: 10px;
        }

        .infor {
            background-color: white;
            color: #333;
            /*text-align: center;*/
            /*line-height: 160px;*/
            display: flex;
        }
    }
</style>